<template>
  <uv-popup ref="popupRef" mode="bottom" :round="16" :closeable="false">
    <view class="realname-modal">
      <view class="title">实名认证</view>
      <view class="desc">根据平台规定使用需进行实名认证</view>
      <view class="actions">
        <view class="action left" @click="onLater">稍后认证</view>
        <view class="divider"></view>
        <view class="action primary" @click="onGoAuth">去认证</view>
      </view>
    </view>
  </uv-popup>
  
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'

const popupRef = ref()
const emit = defineEmits(['open','close'])

const open = () => {
  popupRef.value && popupRef.value.open()
  emit('open')
}

const close = () => {
  popupRef.value && popupRef.value.close()
  emit('close')
}

const onLater = () => {
  close()
}

const onGoAuth = () => {
  close()
  uni.navigateTo({ url: '/user/mine/realNameAuth' })
}

defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.realname-modal {
  width: 92vw; /* 充分居中，避免右侧空白 */
  max-width: 620rpx;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  padding: 40rpx 32rpx 0;
  margin: 0 auto; /* 居中 */
  text-align: center;
  box-sizing: border-box;
}

.title {
  font-size: 34rpx;
  color: #333;
  font-weight: 600;
}

.desc {
  margin-top: 16rpx;
  font-size: 26rpx;
  color: #666;
}

.actions {
  margin-top: 32rpx;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
}

.action {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 30rpx;
  color: #333;
}

.action.primary {
  color: #FF6B35;
}

.divider {
  width: 1rpx;
  height: 96rpx;
  background: #f0f0f0;
}
</style>


